<template>
    <div class="wf-panel wf-settingpanel">
        <div>
            <div class="wf-panel-tab">
                <div href="javascript:;" @click="clickTab" aaaaa='aaaaaa' data-tabname="component" class="tabitem" v-bind:class="[component?'current':'']"
                    style="color: #000000;">控件设置</div>
                <div href="javascript:;" @click="clickTab" data-tabname="form" class="tabitem " v-bind:class="[component?'':'current']" style="color: #000000;">表单设置</div>
            </div>
            <formsetting v-show="!component"></formsetting>
            <widgetsettings v-show="component"></widgetsettings>
        </div>
        <ul class="iconBorder" v-show='!component'>
            <li class="iconLi" :class="{iconLiBor:iconShow == index}" v-for="(item,index) in iconList" :key='item' @click="iconClick(index)">
                <img :src="item" alt="">
                <div class="icontrueBox" v-show="iconShow == index">
                    <div class="icontrue">
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    import { mapActions } from "vuex";
    import formsetting from "./formsetting";
    import widgetsettings from "./widgetsettings";
    export default {
        name: "setting",
        data() {
            return {
                iconList: [],
                component: false,
                iconShow: "-1",
            };
        },
        components: {
            formsetting,
            widgetsettings
        },
        methods: {
            clickTab: function (e) {
                if (e.currentTarget.getAttribute("data-tabName") === "component") {
                    this.component = true;
                } else {
                    this.component = false;
                }
            },
            // 图标选择
            iconClick(index) {
                sessionStorage.setItem("settingIconurl", this.iconList[index]);
                this.iconShow = index;
            },
            ...mapActions(["getapprovalmodelgetlogo"])
        },
        created: function () {
            let self = this;
            drag.$on("changeTab", function (bool) {
                self.component = bool;
            });
            self.getapprovalmodelgetlogo({})
                .then(data => {
                    if (data.statusCode == 200) {
                        if (data.data) {
                            self.iconList = data.data;
                            if (sessionStorage.getItem("formMenu")) {
                                var logoIcon = JSON.parse(sessionStorage.getItem("formMenu"))
                                    .logo;
                                for (var i = 0; i < self.iconList.length; i++) {
                                    if (self.iconList[i] == logoIcon) {
                                        self.iconShow = i;
                                        sessionStorage.setItem("settingIconurl", this.iconList[i]);
                                    }
                                }
                            }
                        }
                    } else if (data.statusCode == "200003") {
                        self.$message({
                            type: "info",
                            message: data.statusMessage
                        });
                        this.$router.push({
                            path: "/login"
                        });
                    } else {
                        self.$message(data.statusMessage);
                    }
                }).catch(msg => {
                    self.$message("服务器异常");
                });

            /* drag.$on("selectComponent", function (obj) {
                         self.supportSetting = Object.assign({}, self.supportSetting, obj)
                     })*/
        }
    };
</script>